<template>

  <div class="device_status_box">
    <div class="box_item">
      设备运行状态
    </div>
    <div class="box_item">
<!--      运行-->
      <div class="status_box" :style="{background:'green',marginRight:'0.3rem'}"></div>
      <div>正常</div>
    </div>
    <div class="box_item">
<!--      关机-->
      <div class="status_box" :style="{background:'red',marginRight:'0.3rem'}"></div>
      <div>关机</div>

    </div>
    <div class="box_item">
      <div class="status_box" :style="{background:'orange',marginRight:'0.3rem'}"></div>
      <div>异常</div>
<!--      待机-->
    </div>
  </div>
</template>

<script>
export default {
name: "status_device"
}
</script>

<style scoped lang="scss">
.status_box{
  height: 0.4rem;
  width: 1rem;
}
.device_status_box{
  display: flex;
  flex-direction: row;
  height: 2rem;
  justify-content: space-around;
  width: 100%;

  .box_item{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    font-size: 0.8rem;

  }
}
</style>
